<template>
    <div class="container">
        <div class="head">图斑导出条件设置</div>
        <div class="table">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="图斑大类">
                    <el-select v-model="form.bigclassId" placeholder="请选择" @change="bigclassChange()" style="width: 300px">
                        <el-option
                        v-for="item in bigclassData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图斑小类">
                    <el-select v-model="form.smallclassId" style="width: 300px" placeholder="请选择">
                        <el-option
                        v-for="item in smallclassData[form.bigclassId]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图斑编号">
                    <el-input v-model="form.tbbh" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="治理情况">
                    <el-radio v-model="radio" label="1">未治理</el-radio>
                    <el-radio v-model="radio" label="2">已治理</el-radio>
                </el-form-item>
                <el-form-item label="图斑状态">
                    <el-radio v-model="radio" label="1">暂存</el-radio>
                    <el-radio v-model="radio" label="2">提交</el-radio>
                    <el-radio v-model="radio" label="3">送审</el-radio>
                </el-form-item>
                <el-form-item label="所在地区">
                    <el-cascader
                        size="large"
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange"
                    >
                    </el-cascader>
                </el-form-item>
            </el-form>
        </div>
        <div class="submit">
            <el-button type="primary">下载</el-button>
            <el-button>清空</el-button>
        </div>
    </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
    name: "ExportSpot",
    data() {
        return {
            form: {
                "approveFlag": 0,
                "bigclassId": '',
                "dsmc": "",
                "id": 0,
                "qxmc": "",
                "smallclassId": '',
                "smc": "",
                "tbbh": "",
                "tbsx": 0,
                "zlqk": 0
            },
            options: regionData,
            selectedOptions: [],
            // 图斑状态
            approveFlag: [{
                value: '0',
                label: '暂存'
            }, {
                value: '1',
                label: '提交'
            }, {
                value: '2',
                label: '送审'
            }],
            // 图斑大类
            bigclassData: [{
                value: '1',
                label: '历史遗留矿山',
            }, {
                value: '2',
                label: '有责任主体的废弃矿山',
            }, {
                value: '3',
                label: '其他情形',
            }],
            smallclassData: {
                "1": [{
                    value: '11',
                    label: '无法确认治理恢复主题的无主废弃矿山'
                }, {
                    value: '12',
                    label: '由政府承担治理恢复责任的政策性关闭矿山'
                }],
                "2": [{
                    value: '21',
                    label: '由企业履行治理恢复责任的政策性关闭矿山'
                }, {
                    value: '22',
                    label: '由企业或个人履行治理恢复责任的有主废弃矿山'
                }],
                "3": [{
                    value: '31',
                    label: '生产矿山'
                }, {
                    value: '32',
                    label: '采矿权过期未注销矿山'
                }, {
                    value: '33',
                    label: '自然灾毁'
                }, {
                    value: '34',
                    label: '建设类损毁'
                }, {
                    value: '35',
                    label: '河道采砂损毁'
                }, {
                    value: '36',
                    label: '尾矿库占用损毁'
                }, {
                    value: '37',
                    label: '未损毁'
                }]
            }
        }
    },
    methods: {
        // 图斑大类
        bigclassChange(){
            this.form.smallclassId = '';
        },
        // 省市县
        handleChange() {
            var loc = "";
            for (let i = 0; i < this.selectedOptions.length; i++) {
                loc += CodeToText[this.selectedOptions[i]];
            }
            alert(loc);
        }
    }
}
</script>

<style scoped>
.table{
    width: 60%;
    margin: auto;
    padding: 30px;
    border: solid 1px #888888;
}
.head {
    margin: 30px;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}
.submit{
    display: flex;
    justify-content: center;
    margin: 30px;
}
</style>